<template>
  <van-form @submit="onSubmit">
    <van-field
      v-model="login.phone"
      autocomplete="off"
      name="phone"
      label="手机号"
      placeholder="手机号"
      :rules="[
        { required: true, message: '请填写手机号' },
        { pattern: phonePattern, message: '请输入正确的手机号码' },
      ]"
    />
    <van-field
      v-model="login.captcha"
      name="captcha"
      center
      clearable
      label="短信验证码"
      placeholder="请输入短信验证码"
      :rules="[
        { required: true, message: '请填写短信验证码' },
        { pattern: /^\d{4}$/, message: '验证码必须为4为数字' },
      ]"
    >
      <template #button>
        <van-button
          native-type="button"
          size="small"
          v-if="!toggle"
          @click.stop="countdown"
          :disabled="!show"
          type="primary"
          >发送验证码</van-button
        >
        <van-button size="small" v-else type="warning">
          {{ countnum }} S</van-button
        >
      </template>
    </van-field>
    <div style="margin: 16px">
      <van-button round block type="info" native-type="submit">提交</van-button>
    </div>
  </van-form>
</template>

<script>
import { Notify } from 'vant'
import { mapState, mapMutations } from 'vuex'

export default {
  data () {
    return {
      login: {
        phone: this.$route.query.phone
      },
      show: false,
      toggle: false,
      phonePattern: this.$reg.phone,
      countnum: 30
    }
  },
  watch: {
    login: {
      deep: true,
      handler (v) {
        if (this.$reg.phone.test(v.phone)) {
          this.show = true
        } else {
          this.show = false
        }
      }
    }
  },
  methods: {
    ...mapMutations('login', ['changePhone', 'resetUserInfo']),
    sendCaptcha () {
      this.$ajax
        .sendcaptcha({
          phone: this.login.phone
        })
        .then((res) => {
          if (res.code == 200) {
            Notify({ type: 'success', message: res.msg })
          }
        })
    },
    countdown () {
      this.sendCaptcha()
      this.toggle = true
      var timer = setInterval(() => {
        if (this.countnum > 0) {
          this.countnum--
          this.toggle = true
        } else {
          clearInterval(timer)
          timer = null
          this.countnum = 60
          this.toggle = false
        }
      }, 1000)
    },
    onSubmit (value) {
      this.$ajax.verifycaptcha(value).then((data) => {
        if (data.code == 200) {
          console.log(data)
          this.changePhone(value.phone)
          this.resetUserInfo()

          // localStorage
          // localStorage.setItem("telphone", value.phone);
          // localStorage.setItem("server_token", data.token);

          // sessionStorage
          window.sessionStorage.setItem('telphone', value.phone)
          window.sessionStorage.setItem('server_token', data.token)

          this.$router.push({ name: 'center' })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.van-button--info {
  margin-top: 40px;
  background-color: #ff5f16;
  border-color: #ff5f16;
}
</style>
